import React, {JSX, createContext, useState, useMemo, useCallback} from 'react';
import {
  ScrollView,
  View,
  StyleSheet,
  ImageBackground,
  TouchableOpacity,
} from 'react-native';
import {BasicNavBar} from '../../kit/navigationBar';
import {BasicText} from '../../kit/text';
import {useNavigate} from '../../navigate/navigate';
import { normalize } from '../../utils/adapter';
const balanceImg = require('../../assets/images/balance_bg.png');
const goldImg = require('../../assets/images/gold_bg.png');

type Props = {};

type State = {
  balanceList: Array<number>;
  goldList: Array<number>;
  balanceIndex: number;
  goldIndex: number;
};

type ContextValue = {} & State;

type CardProps = {
  bg: number;
  list: Array<number>;
  curIndex: number;
  value: number;
  btnColor: string;
  onChange: (index: number) => void;
};

const initialiState: State = {
  balanceList: [1, 5, 10, 20, 50, 100],
  goldList: [1, 5, 10, 20, 50, 100],
  balanceIndex: 0,
  goldIndex: 0,
};

const WithdrawalScreenContext = createContext<ContextValue | undefined>(
  initialiState,
);

const Card = function ({
  bg,
  list,
  value,
  curIndex,
  btnColor,
  onChange,
}: CardProps) {
  const isDisableBtn = useMemo(() => {
    const val = list[curIndex];
    if (val <= 0 || val > value) {
      return true;
    }
    return false;
  }, [value, curIndex, list]);

  return (
    <View style={styles.card_container}>
      <ImageBackground style={styles.card_info_container} source={bg}>
        <View>
          <BasicText fontSize={normalize(14)}>红包余额</BasicText>
        </View>
        <View style={styles.exchange_rate_view}>
          <BasicText fontSize={normalize(32)} fontWeight={'bold'}>
            {value}
          </BasicText>
          <View style={{transform: [{translateY:-normalize(10)}]}}>
            <BasicText fontSize={normalize(14)}>≈0.62元</BasicText>
          </View>
        </View>
        <View>
          <BasicText fontSize={12} color="rgba(255,255,255,0.8)">
            追剧领红包，看剧越多赚钱越多
          </BasicText>
        </View>
      </ImageBackground>
      <View style={styles.list_view}>
        <BasicText color="#333">红包金额</BasicText>
        <View style={styles.list}>
          {list &&
            list.length &&
            list.map((num, index) => (
              <Radio
                num={num}
                isActive={curIndex === index}
                key={index}
                onChange={() => onChange(index)}
              />
            ))}
        </View>
        <TouchableOpacity
          style={[styles.withdraw_btn, {backgroundColor: btnColor}]}
          disabled={isDisableBtn}>
          <BasicText>{'立即提现'}</BasicText>
        </TouchableOpacity>
      </View>
    </View>
  );
};

const Radio = function ({
  num,
  isActive,
  onChange,
}: {
  num: number;
  isActive: boolean;
  onChange: () => void;
}) {
  const activeStyles = useMemo(() => {
    if (isActive) {
      return {
        backgroundColor: '#FFF8EE',
        borderColor: '#FF685A',
      };
    } else {
      return {
        backgroundColor: '#fff',
        borderColor: '#999999',
      };
    }
  }, [isActive]);

  const activeTextColor = useMemo(() => {
    return isActive ? '#FF685A' : '#999999';
  }, [isActive]);
  return (
    <TouchableOpacity
      style={[styles.radio_container, activeStyles]}
      onPress={onChange}>
      <BasicText color={activeTextColor}>{num}</BasicText>
    </TouchableOpacity>
  );
};

const WithdrawalHistory = function() {
  const navigate = useNavigate();
  const handleNavigateHistory = useCallback(() => {
    navigate.navigateWithdrawalHistory();
  }, [navigate]);

  return (
    <TouchableOpacity
      style={styles.withdraw_menu}
      onPress={handleNavigateHistory}>
      <BasicText color="#333" fontSize={normalize(14)}>
        提现记录
      </BasicText>
    </TouchableOpacity>
  );
};

function WithdrawalScreen({}: Props): JSX.Element {
  const [state, setState] = useState<State>(initialiState);

  const set = useCallback(
    (params: State) => {
      setState({...params});
    },
    [setState],
  );

  const onBalanceChange = useCallback(
    (index: number) => {
      const params = {...state};
      params.balanceIndex = index;
      set(params);
    },
    [set, state],
  );

  const onGoldChange = useCallback(
    (index: number) => {
      const params = {...state};
      params.goldIndex = index;
      set(params);
    },
    [set, state],
  );

  return (
    <WithdrawalScreenContext.Provider value={{...state}}>
      <BasicNavBar title="提现" RightSolt={<WithdrawalHistory />} />
      <ScrollView style={styles.scroll_view}>
        <View>
          <Card
            bg={balanceImg}
            list={state.balanceList}
            curIndex={state.balanceIndex}
            value={1}
            btnColor="#FF685A"
            onChange={onBalanceChange}
          />
          <Card
            bg={goldImg}
            list={state.goldList}
            curIndex={state.goldIndex}
            value={1}
            btnColor="#FF943A"
            onChange={onGoldChange}
          />
        </View>
      </ScrollView>
    </WithdrawalScreenContext.Provider>
  );
}

const styles = StyleSheet.create({
  scroll_view: {
    flex: 1,
  },
  card_container: {
    marginTop: normalize(20),
    backgroundColor: '#fff',
    borderRadius: normalize(8),
    overflow: 'hidden',
  },
  card_info_container: {
    height: normalize(112),
    paddingHorizontal: normalize(16),
    paddingVertical: normalize(20),
  },
  exchange_rate_view: {
    flexDirection: 'row',
    alignItems: 'flex-end',
    gap: normalize(15),
  },
  list_view: {
    paddingHorizontal: normalize(20),
    paddingVertical: normalize(16),
  },
  list: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    gap: normalize(10),
    marginTop: normalize(16),
    marginBottom: normalize(16),
  },
  radio_container: {
    width: '30%',
    minHeight: normalize(54),
    justifyContent: 'center',
    alignItems: 'center',
    borderWidth: normalize(1),
    borderColor: '#999999',
    borderStyle: 'solid',
    borderRadius: normalize(8),
  },
  withdraw_btn: {
    height: normalize(48),
    borderRadius: normalize(26),
    justifyContent: 'center',
    alignItems: 'center',
    marginTop: normalize(15),
  },
  withdraw_menu:{
    justifyContent:'center',
  },
});

export default WithdrawalScreen;
